<template>
  <intro-view :usage="usage" v-if="$route.name == 'dialog'">
    <div ref="page">
      <button @click="$refs['dialog'].show()">showDialog</button>
      <button @click="showJsDialog">showJsDialog</button>
      <!--Inner Dialog-->
      <ui-dialog ref="dialog" v-model="show" mask mask-show>
        <div style="background: #fff">
          hello world
        </div>
      </ui-dialog>
    </div>
  </intro-view>
  <router-view v-else/>
</template>

<script>
  import usage from './usage.md'
  export default {
    data() {
      return {
        usage,
        show: false
      }
    },
    methods: {
      showJsDialog () {
        this.$UiDialog.new({onEl: this.$refs['page'], html: `<div style="background: #fff">hello</div>`})
      }
    }
  }
</script>
